<template>
  <div class="report-container">

    <div class="report-title">
      <span class="title">线圈车间品质看板</span>
    </div>

    <div class="report-main">


      <div class="con-left">
        <SimEcharts height="32%" class="e-chart-border" :chart-data="barData01"/>
        <SimEcharts height="32%" class="e-chart-border" :chart-data="barData02"/>
        <SimEcharts height="33%" class="e-chart-border" :chart-data="basicLineData"/>
      </div>


      <div class="con-main">

        <div class="right-header">

          <div class="line">
            <div class="title">首检</div>
            <div class="content">今日建单：{{ rightHeader['首检'] }}</div>
            <div class="content">合格率：<span>{{ rightHeader['首检合格率'] }}%</span></div>
          </div>

          <div class="line">
            <div class="title">巡检</div>
            <div class="content">今日建单：{{ rightHeader['巡检'] }}</div>
            <div class="content">合格率：<span>{{ rightHeader['巡检合格率'] }}%</span></div>
          </div>

          <div class="line">
            <div class="title">终检</div>
            <div class="content">今日建单：{{ rightHeader['终检'] }}</div>
            <div class="content">合格率：<span>{{ rightHeader['终检合格率'] }}%</span></div>
          </div>

        </div>

        <SimEcharts height="53%" class="e-chart-border" :chart-data="stackBarData"/>

      </div>


      <div class="con-right">

        <SimEcharts height="45%" class="e-chart-border" :chart-data="pieData"/>
        <div class="right-table">
          <p>首检-待检单据：<span>{{ tableData.length }}</span></p>
          <div class="table-header">
            <div class="item-line">
              <div class="line-column col-2">检验单号</div>
              <div class="line-column col-3">工单号</div>
              <div class="line-column col-4">等待时长</div>
            </div>
          </div>
          <div ref="tableContent" class="table-content">
            <template v-for="(item, index) in tableData">
              <div :key="index" class="item-line">
                <div class="line-column col-2">{{ item.checkCode }}</div>
                <div class="line-column col-3">{{ item.shopOrder }}</div>
                <div class="line-column col-4" style="text-align: center">
                  <!--<SimTime show-type="text" type="S" :data="item.waitingTime"/>-->
                  {{ item.waitingTime }}
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>

    </div>


  </div>
</template>

<script>

import {barData, basicLineData, stackBarData} from '@/api/service-module/dashBoard/echartsData'
import {connectWebsocket, sendMessage} from "@/api/websocket";

export default {
  name: 'ColiQualityDashBoard',
  data() {
    return {
      nowDate: '',
      rightHeader: {
        '首检': 20,
        '首检合格率': 96,
        '巡检': 12,
        '巡检合格率': 98,
        '终检': 15,
        '终检合格率': 99
      }, // 首检、巡检、终检 合格率
      barData01: JSON.parse(JSON.stringify(barData)), // // 月检不良项目
      barData02: JSON.parse(JSON.stringify(barData)), // // 月检不良型号
      basicLineData: basicLineData, // // 首检核对平均时长
      stackBarData: stackBarData, // // 品质检验次数
      //pieData: pieData3, // 不合格工序TOP3
      tableData: []
    }
  },
  created() {
    this.initWebData()
    this.reloadWeb()
  },
  mounted() {
    this.rollText()
    this.initData()
  },
  destroyed() {
    window.clearInterval(this.timer)
  },
  methods: {
    reloadWeb() {
      //每隔8小时刷新一下页面，防止卡死
      setTimeout(location.reload, 1000 * 60 * 60 * 8)
    },
    initWebData() {
      connectWebsocket(
          // 测试地址
          process.env.VUE_APP_WS_URL + '/CoilDashBoardWebSocket/coil',
          // 传递给后台的数据
          {},
          // 成功拿到后台返回的数据的回调函数
          (data) => {
            console.log(JSON.parse(data))
            this.queryBadProject(JSON.parse(data).monthlyItems16)
            this.queryBadModel(JSON.parse(data).monthlyModel16)
            this.queryFirstCheckAvgTime(JSON.parse(data).averageTimeCheck16)
            this.queryRatePassToday(JSON.parse(data).ratePassToday16)
            this.queryQuaCheckTimes(JSON.parse(data).productNumber16)
            this.queryRightTableData(JSON.parse(data).waitingDocuments16)
          },
          () => {
            sendMessage("Im tired!")
          }
      )
    },
    initData() {
      /* 月检不良项目 */
      this.barData01.title.text = '月检不良项目'
      this.barData01.color = '#FFCD43'

      /* 月检不良型号 */
      this.barData02.title.text = '月检不良型号'
      this.barData02.color = '#FF5500'

      // 首检核对平均时长
      this.basicLineData.title.text = '首检核对平均时长'

      // 不合格工序TOP3
      /*      this.pieData.title[0].text = '不合格工序TOP3'
            this.pieData.title[1].subtext = '单相50Hz线圈'
            this.pieData.title[2].subtext = '三相50Hz线圈'
            this.pieData.title[3].subtext = '单相60Hz线圈'
            this.pieData.title[4].subtext = '三相60Hz线圈'
            this.pieData.series[0].label.position = 'inner'
            this.pieData.series[1].label.position = 'inner'
            this.pieData.series[2].label.position = 'inner'
            this.pieData.series[0].label.color = '#ffffff'
            this.pieData.series[1].label.color = '#082df3'
            this.pieData.series[2].label.color = '#ffffff'*/

      // 品质检验次数
      this.stackBarData.title.text = '品质检验次数'
      this.stackBarData.legend.data = ['首检', '巡检', '终检']
      this.stackBarData.series[0].name = '首检'
      this.stackBarData.series[1].name = '巡检'
      this.stackBarData.series[2].name = '终检'

      // 首检、巡检、终检 合格率

      // 待检单据数据
      this.formatDate()
    },
    queryBadProject(data) {
      let xAxis = [];
      let series = []
      xAxis = data.map(item => {
        return item.PARAMETER_DESC
      })
      series = data.map(item => {
        return item.NUM
      })
      this.barData01.xAxis.data = xAxis
      this.barData01.series[0].data = series
    },
    queryBadModel(data) {
      let xAxis = [];
      let series = []

      xAxis = data.map(item => {
        return item.ITEM_NAME
      })
      series = data.map(item => {
        return item.NUM
      })
      this.barData02.xAxis.data = xAxis
      this.barData02.series[0].data = series

    },
    queryFirstCheckAvgTime(data) {
      const xAxis = [];
      const yAxis = []

      for (const key in data) {
        xAxis.push(key)
        yAxis.push(data[key])
      }
      this.basicLineData.xAxis.data = xAxis
      this.basicLineData.series[0].data = yAxis
    },
    queryQuaCheckTimes(data) {
      this.stackBarData.xAxis[0].data = data.map(item => {
        return item.day
      })
      this.stackBarData.series[0].data = data.map(item => {
        return item['首检']
      })
      this.stackBarData.series[1].data = data.map(item => {
        return item['巡检']
      })
      this.stackBarData.series[2].data = data.map(item => {
        return item['终检']
      })
    },
    queryDisqualificationProcess(data) {
      this.pieData.series[0].data = data.shaft.map(item => {
        return {
          name: item.OPERATION_NAME,
          value: item.NUM
        }
      })
      this.pieData.series[1].data = data.spiale.map(item => {
        return {
          name: item.OPERATION_NAME,
          value: item.NUM
        }
      })
      this.pieData.series[2].data = data.onesie.map(item => {
        return {
          name: item.OPERATION_NAME,
          value: item.NUM
        }
      })
      this.pieData.series[3].data = data.twosie.map(item => {
        return {
          name: item.OPERATION_NAME,
          value: item.NUM
        }
      })

    },
    queryRatePassToday(data) {
      this.rightHeader = data[0]
    },
    queryRightTableData(data) {

      const list = data
      list.forEach(item => {
        item.checkType = item.checkType === '0' ? '首件检验' : item.checkType === '1' ? '巡检检验' : '最终检验'
      })
      this.tableData = list
    },
    formatDate() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() // 日
      const week = date.getDay() // 星期
      const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}-${month}-${day} ${hour}:${minute}:${second} ${weekArr[week]}`
    },
    rollText() {
      let speed = 280
      let that = this

      function Marquee() {
        if (that.$refs.tableContent) {
          if (that.$refs.tableContent.scrollTop >= that.$refs['tableContent'].offsetHeight) {
            that.$refs.tableContent.scrollTop = 0
          } else that.$refs.tableContent.scrollTop = that.$refs.tableContent.scrollTop + 1
        }
      }

      setInterval(Marquee, speed)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 小分辨率设备 (平板、电视机或者安卓设备, 960px and down) */
@media only screen and (max-width: 960px) {
  .report-container {
    background-image: url("../../../public/billboard.jpg");
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    font-size: 12px;

    .report-title {
      width: 100%;
      text-align: center;
      color: #F2F6FC;

      .title {
        font-size: 1.5rem;
      }
    }

    .report-main {
      height: calc(100% - 52px);
      display: flex;

      .con-left {
        width: 25%;
        height: 100%;
      }

      .con-main {
        margin: 0 1%;
        width: 38%;
        height: 100%;

        .right-header {
          border: 1px solid rgba(0, 255, 255, 0.08);
          height: 30%;
          overflow: hidden;
          text-align: center;
          padding-top: 1rem;
          padding-left: 1rem;

          .line {
            height: 33%;
            min-height: 40px;
            line-height: 40px;
            display: flex;

            .title {
              width: 20%;
              color: #20a0ff;
              font-size: 20px
            }

            .content {
              width: 40%;
              color: #F2F6FC;
              font-size: 14px;

              span {
                color: #00a65a;
              }
            }
          }
        }
      }

      .con-right {
        width: 35%;
        height: 100%;
        overflow: hidden;

        .right-table {
          border: 1px solid rgba(0, 255, 255, 0.18);
          margin-bottom: 1%;
          height: 68%;
          overflow: hidden;

          p {
            color: #20a0ff;
            font-weight: bolder;
            margin: 4px 0;
            padding: 2px 4px;
          }

          .table-header {
            color: #FFF;
            font-weight: bolder;

            .item-line {
              border-top: 1px solid rgba(0, 255, 255, 0.32);
              min-height: 32px;
              display: flex;
            }
          }

          .table-content :nth-of-type(odd) {
            background: rgba(122, 178, 203, 0.22);
          }

          .table-content :nth-of-type(even) {
            background: rgba(153, 203, 122, 0.22);
          }

          .table-content {
            color: #20a0ff;
            height: calc(100% - 58px);
            overflow: hidden;
            font-size: 12px;

            .item-line {
              display: flex;
              border: 1px solid rgb(255, 255, 255);
              margin: 0.2rem;
              border-radius: 5px;
              color: #FFFFFF;
            }
          }

          .line-column {
            padding: 2px 4px;
            border: 1px solid rgba(255, 255, 255, 0);
            word-break: break-word;
          }

          .col-2 {
            width: 35%;
          }

          .col-3 {
            width: 35%;
          }

          .col-4 {
            width: 30%;
          }
        }
      }

      .e-chart-border {
        border: 1px solid rgba(0, 255, 255, 0.08);
        margin-bottom: 1%;
      }
    }
  }
}

/* 大分辨率设备 (工作站或者台式机, 961px and up) */
@media only screen and (min-width: 961px) {
  .report-container {
    background-image: url("../../../public/billboard.jpg");
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    font-size: 12px;

    .report-title {
      width: 100%;
      text-align: center;
      color: #F2F6FC;
      font-size: 2rem;
    }

    .report-main {
      height: calc(100% - 52px);
      display: flex;
      margin-top: 1rem;

      .con-left {
        width: 25%;
        height: 100%;
      }

      .con-main {
        margin: 0 1%;
        width: 38%;
        height: 100%;

        .right-header {
          border: 1px solid rgba(0, 255, 255, 0.08);
          height: 30%;
          padding-top: 2rem;
          padding-left: 4rem;
          overflow: hidden;
          text-align: center;

          .line {
            height: 33%;
            min-height: 40px;
            line-height: 40px;
            display: flex;

            .title {
              width: 20%;
              color: #20a0ff;
              font-size: 20px
            }

            .content {
              width: 40%;
              color: #F2F6FC;
              font-size: 14px;

              span {
                color: #00a65a;
              }
            }
          }
        }
      }

      .con-right {
        width: 35%;
        height: 100%;
        overflow: hidden;

        .right-table {
          border: 1px solid rgba(0, 255, 255, 0.18);
          margin-bottom: 1%;
          height: 68%;
          overflow: hidden;

          p {
            color: #ffffff;
            font-weight: bolder;
            margin: 4px 0;
            padding: 2px 4px;
          }

          .table-header {
            color: #FFF;
            font-weight: bolder;

            .item-line {
              border-top: 1px solid rgba(255, 255, 255, 0.3);
              min-height: 32px;
              display: flex;
            }
          }

          .table-content :nth-of-type(odd) {
            background: rgba(122, 178, 203, 0.22);
          }

          .table-content :nth-of-type(even) {
            background: rgba(153, 203, 122, 0.22);
          }

          .table-content {
            color: rgb(255, 255, 255);
            height: calc(100% - 58px);
            overflow: hidden;
            font-size: 12px;

            .item-line {
              display: flex;
              border: 1px solid rgb(241, 237, 237);
              margin: 0.4rem;
              font-size: 1rem;
              border-radius: 9px;
            }
          }

          .line-column {
            word-break: break-word;
          }

          .col-2 {
            width: 35%;
          }

          .col-3 {
            width: 35%;
          }

          .col-4 {
            width: 30%;
          }

          .bg-green {
            color: #00a65a;
          }

          .bg-blue {
            color: #20a0ff;
          }

          .bg-yellow {
            color: #FFBA00;
          }
        }
      }

      .e-chart-border {
        border: 1px solid rgba(0, 255, 255, 0.08);
        margin-bottom: 1%;
      }
    }
  }
}
</style>
